/*
 * @Author: Wilbur
 * @Date: 2018-12-07 08:31:43
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-12-10 17:08:53
 */

<template>
    <div class="container verify-class-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择赞助：">
                            <el-select
                                v-model="selectedTaskNo"
                                filterable
                                placeholder="请选择">
                                <el-option
                                    v-for="item in taskList"
                                    :key="item.task_no"
                                    :label="item.title"
                                    :value="item.task_no"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 12 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            @click="fnAddTask"
                            type="primary">添加赞助</el-button>
                        <p class="btn-desc">*添加的班级，会默认有这些任务</p>
                    </el-col>
                </el-form>
            </el-row>
            <el-row class="filter-item tags-wrapper">
                <el-col
                    class="filter-item"
                    :md="{ span: 24 }"
                    :sm="{ span: 24 }">
                    <el-tag
                        v-for="tag in selectedTaskList"
                        :key="tag.task_no"
                        closable
                        @close="fnDelTag(tag.task_no)"
                        class="hd-tag"
                        size="small">
                        {{ tag.title }}
                    </el-tag>
                </el-col>
            </el-row>
            <div
                class="table-wrapper table-normal verify-class-wrap">
                <div style="margin-top: 20px;margin-bottom: 20px;">
                    <el-radio-group
                        v-model="verifyStatus"
                        @change="fnGetTableDataList(1)"
                        size="small">
                        <el-radio-button label="1">审核中</el-radio-button>
                        <el-radio-button label="2">已通过</el-radio-button>
                    </el-radio-group>
                </div>
                <div style="height: calc(100% - 120px)">
                    <el-table
                        :data="tableData"
                        height="100%"
                        style="width: 100%;margin-bottom: 15px;">
                        <el-table-column
                            fixed="left"
                            prop="apply_id"
                            show-overflow-tooltip
                            class-name="class-gray"
                            label="ID"/>
                        <el-table-column
                            fixed="left"
                            prop="true_name"
                            show-overflow-tooltip
                            class-name="class-gray"
                            label="真实姓名"/>
                        <el-table-column
                            fixed="left"
                            prop="user_info"
                            show-overflow-tooltip
                            class-name="class-gray"
                            label="微信用户">
                            <template slot-scope="scope">
                                <img
                                    class="head-img"
                                    :src="scope.row.user_info.head_img"
                                    alt="头像">
                                <span>{{ scope.row.user_info.nickname }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="school_name"
                            show-overflow-tooltip
                            class-name="class-gray"
                            label="学校名称"/>
                        <el-table-column
                            prop="academy_name"
                            show-overflow-tooltip
                            class-name="class-gray"
                            label="学院名称"/>
                        <el-table-column
                            prop="class_name"
                            show-overflow-tooltip
                            width="140px"
                            label="班级名称">
                            <template slot-scope="scope">
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="scope.row.class_name"
                                    placement="top">
                                    <div>
                                        <input
                                            v-if="(verifyStatus == 1 && scope.row.verify_status !=1) ? true : false"
                                            type="text"
                                            @blur="fnEditTableData(scope.row.apply_id,'class_name', scope.row.class_name)"
                                            :disabled="(verifyStatus == 1 && scope.row.verify_status !=1) ? false : true"
                                            :class="(verifyStatus == 1 && scope.row.verify_status !=1) ? '' : 'input-disabled'"
                                            v-model="scope.row.class_name"
                                            class="table-inner-input">
                                        <span v-else>{{ scope.row.class_name }}</span>
                                    </div>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="max_grade"
                            width="100px"
                            label="年制">
                            <template slot-scope="scope">
                                <el-select
                                    class="grade-select"
                                    @change="fnEditTableData(scope.row.apply_id,'max_grade', scope.row.max_grade)"
                                    :disabled="(verifyStatus == 1 && scope.row.verify_status !=1) ? false : true"
                                    :class="(verifyStatus == 1 && scope.row.verify_status !=1) ? '' : 'select-disabled'"
                                    v-model="scope.row.max_grade"
                                    placeholder="请选择">
                                    <el-option
                                        v-for="item in maxGradeList"
                                        :key="item.grade"
                                        :label="item.label"
                                        :value="item.grade"/>
                                </el-select>
                            <!-- <input
                                type="text"
                                @blur="fnEditTableData(scope.row.apply_id,'max_grade', scope.row.max_grade)"
                                v-model="scope.row.max_grade"
                                :disabled="(verifyStatus == 1 && scope.row.verify_status !=1) ? false : true"
                                :class="(verifyStatus == 1 && scope.row.verify_status !=1) ? '' : 'input-disabled'"
                                class="table-inner-input"> -->
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="grade"
                            width="90px"
                            label="年级">
                            <template slot-scope="scope">
                                <el-select
                                    class="grade-select"
                                    @change="fnGradeChange(scope.row.apply_id,'grade', scope.row.grade)"
                                    :disabled="(verifyStatus == 1 && scope.row.verify_status !=1) ? false : true"
                                    :class="(verifyStatus == 1 && scope.row.verify_status !=1) ? '' : 'select-disabled'"
                                    v-model="scope.row.grade"
                                    placeholder="请选择">
                                    <el-option
                                        v-for="item in gradeList1"
                                        :key="item.grade"
                                        :label="item.label"
                                        :value="item.grade"/>
                                </el-select>
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="student_count"
                            label="班级人数">
                            <template slot-scope="scope">
                                <input
                                    type="number"
                                    @blur="fnEditTableData(scope.row.apply_id,'student_count', scope.row.student_count)"
                                    v-model="scope.row.student_count"
                                    :disabled="(verifyStatus == 1 && scope.row.verify_status !=1) ? false : true"
                                    :class="(verifyStatus == 1 && scope.row.verify_status !=1) ? '' : 'input-disabled'"
                                    placeholder=""
                                    class="table-inner-input">
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="submit_city"
                            width="100px"
                            label="IP所在城市">
                            <template slot-scope="scope">
                                {{ scope.row.submit_city }}
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="submit_time"
                            width="150px"
                            label="提交时间">
                            <template slot-scope="scope">
                                {{ scope.row.submit_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                            </template>
                        </el-table-column>

                        <el-table-column
                            width="120px"
                            fixed="right"
                            label="操作">
                            <template slot-scope="scope">
                                <template v-if="verifyStatus == 1">
                                    <!-- 未审核 -->
                                    <template v-if="scope.row.verify_status == 0">
                                        <el-button
                                            type="text"
                                            @click="fnSetClassVerifyStatus(scope.row.apply_id, 2)">通过</el-button>
                                        <el-button
                                            type="text"
                                            @click="fnReject(scope.row.apply_id, 1)"
                                            class="btn-delete">驳回</el-button>
                                        <el-button
                                            type="text"
                                            @click="fnPassAndUpload(scope.row.apply_id, 2)"
                                            class="upload-verify-btn">上传证明并通过</el-button>
                                    </template>
                                    <!-- 审核失败 -->
                                    <template v-if="scope.row.verify_status == 1">
                                        <el-button
                                            type="text"
                                            disabled
                                            class="check-btn">待再次提交</el-button>
                                    </template>
                                </template>
                                <template v-else>
                                    <el-button
                                        type="text"
                                        :disabled="scope.row.verify_image=='' ? true : false"
                                        @click="fnCheckImage(scope.row.verify_image)"
                                        class="check-btn">查看</el-button>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-wrapper clearfix">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="fnGetTableDataList" />
                </div>
            </div>
        </div>
        <!-- 上传证据弹窗 -->
        <el-dialog
            title="请上传能证明是对应班级成员的图片"
            :visible.sync="verifyDialogVisible"
            width="434px"
            center>
            <el-upload
                class="upload-inner-wrap"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                :http-request="e=> {fnUploadImageOfClassVerify(e)}"
                :show-file-list="false">
                <img
                    class="img-upload"
                    :src="image_url"
                    v-if="image_url">
                <i
                    class="el-icon-upload"
                    v-if="!image_url"/>
                <div
                    class="el-upload__text"
                    v-if="!image_url">
                    将文件拖到此处，或<em>点击上传</em>
                    <p class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</p>
                </div>
            </el-upload>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="fnPassAndUploadImg"
                    size="small">审核通过</el-button>
            </span>
        </el-dialog>
        <!-- 查看图片 -->
        <el-dialog
            title="查看"
            :visible.sync="showCheckImageDialog">
            <img
                class="check-img"
                :src="checkImageUrl"
                alt="图片">
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            showCheckImageDialog: false,
            checkImageUrl: '',
            apply_id: '',
            image_url: '',
            selectedTaskList: [],
            selectedTaskNo: '',
            taskList: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            verifyDialogVisible: false,
            verifyStatus: 1,
            tags: [
                { name: '标签一', type: '' },
                { name: '标签二', type: '' }
            ],
            city_id: '',
            school_id: '',
            academy_no: '',
            school_name: '',
            academy_name: '',
            cityList:[],
            schoolList: [],
            academyList: [],
            authResult: {},
            tableData: [],
            maxGradeList: [{
                grade: 3,
                label: '3年制'
            },{
                grade: 4,
                label: '4年制'
            },{
                grade: 5,
                label: '5年制'
            }],
            gradeList:[{
                grade: '',
                label: '全部'
            },{
                grade: 1,
                label: '大一'
            },{
                grade: 2,
                label: '大二'
            },{
                grade: 3,
                label: '大三'
            },{
                grade: 4,
                label: '大四'
            },{
                grade: 5,
                label: '大五'
            },{
                grade: -1,
                label: '已毕业'
            }],
            gradeList1:[{
                grade: 1,
                label: '大一'
            },{
                grade: 2,
                label: '大二'
            },{
                grade: 3,
                label: '大三'
            },{
                grade: 4,
                label: '大四'
            },{
                grade: 5,
                label: '大五'
            },{
                grade: -6,
                label: '研一'
            },{
                grade: -7,
                label: '研二'
            },{
                grade: -8,
                label: '研三'
            }]
        };
    },
    watch: {
        verifyDialogVisible(val) {
            if (!val) {
                this.image_url = '';
            }
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "任务反馈系统",
            },
            {
                title: "班级管理"
            },
            {
                title: "班级审核"
            }
        ]);
        this.fnGetTaskList(list =>{
            if(!this.$route.query.task_nos) return;
            let task_nos = this.$route.query.task_nos.split(',');


            for(let i = 0; i < task_nos.length; i++) {
                for(let j = 0; j < list.length; j++) {
                    if(task_nos[i] == list[j].task_no) {
                        this.selectedTaskList.push({task_no: task_nos[i], title: list[j].title});
                    }
                }
            }
        });
        this.fnGetTableDataList();
    },
    methods: {
        fnGradeChange(id, name, value) {
            let gd = value;
            let apply_id = id;
            let formname = name;
            let grade_type = '';
            let grade_commit = '';

            if(gd == 1 || gd == 2 || gd == 3 || gd == 4 || gd == 5) {
                grade_type = 1;
                grade_commit = gd;
            }else if(gd == -6 || gd == -7 || gd == -8) {
                grade_type = 2;
                grade_commit = Math.abs(gd) - 5;
            }else if(gd == -1){
                grade_type = '';
                grade_commit = -1;
            }else{
                grade_type = '';
                grade_commit = '';
            }
            this.fnEditTableData(id, name, grade_commit, grade_type);
        },
        fnDelTag(task_no) {
            for(let i = 0; i < this.selectedTaskList.length; i++) {
                if(this.selectedTaskList[i].task_no == task_no) {
                    this.selectedTaskList.splice(i, 1);
                    this.fnInitSelected();
                }
            }
        },
        fnAddTask() {
            let selectedTaskTitle = '';

            for(let i = 0; i < this.taskList.length; i++) {
                if(this.taskList[i].task_no == this.selectedTaskNo) {
                    selectedTaskTitle = this.taskList[i].title;
                }
            }
            if(JSON.stringify(this.selectedTaskList).indexOf(this.selectedTaskNo) == -1) {
                this.selectedTaskList.push({task_no: this.selectedTaskNo, title: selectedTaskTitle});
            }

            this.fnInitSelected();
        },
        fnInitSelected() {
            let temp = '';

            if(this.selectedTaskList.length == 0) {
                this.$router.replace({
                    name: this.$route.name
                });
            }else{
                for(let i = 0; i < this.selectedTaskList.length; i++) {
                    if(temp){
                        temp += ',';
                    }
                    temp += this.selectedTaskList[i].task_no;
                    this.$router.replace({
                        name: this.$route.name,
                        query: {
                            task_nos: temp
                        }
                    });
                }
            }
        },
        fnReject(id, status) {
            this.$prompt('请输入不通过原因', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPlaceholder: '默认：填写数据有误'
            }).then(({ value }) => {
                this.fnSetClassVerifyStatus(id, status, value);
            }).catch(() => {
                console.log('cancel');
            });
        },
        fnPassAndUpload(id, status) {
            this.verifyDialogVisible = true;
            this.apply_id = id;
        },
        fnPassAndUploadImg() {
            if(this.image_url == '') {
                this.$message({
                    type: 'warning',
                    message: '请上传图片'
                });
                return;
            }

            this.fnSetClassVerifyStatus(this.apply_id, 2);
        },
        /**
         * 拒绝弹窗非空验证
         */
        validateDenyInput(value) {
            if (value) {
                return true;
            } else {
                return '请输入不通过原因';
            }
        },
        fnDelClassItem(index) {
            this.tableData.splice(index, 1);
        },
        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },
        /**
         * 获取任务列表
         */
        fnGetTaskList(callback) {
            this.$post('/task/task%5Cget_simple_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.taskList = resp.data.list;
                    callback(this.taskList);
                }
            });
        },
        fnGetTableDataList(page) {
            this.$post('/task/base_class_create_apply%5Cget_list', {
                page_id: page || this.page.now_page,
                verify: this.verifyStatus
            }, resp => {
                if (resp.code == 1) {
                    let list = resp.data.list;

                    for(let i = 0; i < list.length; i++) {
                        if(list[i].grade_type == 2) {
                            list[i].grade = -list[i].grade - 5;
                        }
                    }
                    this.tableData = list;

                    this.page = resp.data.page;
                }
            });
        },
        fnEditTableData(id, name, val, type) {
            let json = {};

            if(type == undefined) {
                json = {
                    apply_id: id,
                    [name]: val
                };
            }else{
                json = {
                    apply_id: id,
                    [name]: val,
                    grade_type: type
                };
            }
            this.$post('/task/base_class_create_apply%5Cedit', json, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    });
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '操作失败'
                    });
                }
            });
        },
        fnSetClassVerifyStatus(id, status, reson) {
            // let temp = '';

            // for(let i = 0; i < this.selectedTaskList.length; i++) {
            //     if(temp){
            //         temp += ',';
            //     }
            //     temp += this.selectedTaskList[i].task_no;
            // }
            this.$post('/task/base_class_create_apply%5Cverify', {
                apply_id: id,
                verify_status: status,
                verify_fail_reason: reson ? reson : '数据填写有误',
                verify_image: this.image_url,
                task_nos: this.$route.query.task_nos || ''
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    });
                    this.verifyDialogVisible = false;
                    this.fnGetTableDataList(this.page.now_page);
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '操作失败'
                    });
                }
            });
        },
        fnUploadImageOfClassVerify(e){
            this.fnUploadImage(e, (resp) => {
                this.image_url = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        fnCheckImage(img) {
            this.checkImageUrl = img;
            this.showCheckImageDialog = true;
        },
        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        gradeFormatter(row, column, val) {
            console.log(row.grade_type);
            // 大学生
            if(row.grade_type == '1') {
                if(val == '1') {
                    return '大一';
                }else if(val == '2') {
                    return '大二';
                }else if(val == '3') {
                    return '大三';
                }else if(val == '4') {
                    return '大四';
                }else if(val == '5') {
                    return '大五';
                }else if(val == '0') {
                    return '已毕业';
                }else if(val == '-2') {
                    return '--';
                }else{
                    return val;
                }
            }else if(row.grade_type == '2') { //研究生
                if(val == '1') {
                    return '研一';
                }else if(val == '2') {
                    return '研二';
                }else if(val == '3') {
                    return '研三';
                }else if(val == '-2') {
                    return '--';
                }else{
                    return val;
                }
            }else{
                return '--';
            }
        },
        formatterGradeBack(val) {
            if(val == '大一') {
                return '1';
            }else if(val == '大二') {
                return '2';
            }else if(val == '大三') {
                return '3';
            }else if(val == '大四') {
                return '4';
            }else if(val == '大五') {
                return '5';
            }else{
                return val;
            }
        }
    }
};
</script>
<style lang="less" scoped>
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
.verify-class-container{

    .content-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 15px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .search-wrapper {
        padding: 15px;
        background-color: #fff;
        padding-bottom: 0;
    }
    .btn-desc{
        display: inline-block;
        height: 34px;
        line-height: 34px;
        font-size:14px;
        font-weight:400;
        color:rgba(153,153,153,1);
        margin-left: 15px;
    }
    .tags-wrapper{
        background: #fff;
        padding-left: 15px;
        .hd-tag{
            margin-right: 15px;
            margin-bottom: 15px;
        }
    }

    .filter-item {
        margin-bottom: 15px;
        .el-form-item {
            margin-bottom: 0;
        }
        .el-autocomplete {
            width: 100%;
        }
    }
    .table-normal{
        flex: 1;
        background-color: #fff;
        padding: 0 15px;
        position: relative;
    }
    .table-disabled{
        flex: 1;
        background-color: #fff;
        padding: 0 15px;
        position: relative;
        &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            cursor: not-allowed;
            background-image: none;
            background-color: rgba(255,255,255,0.7);
            border-color: #ebeef5;
            left: 0;
            top: 0;
            z-index: 999;
        }
    }
    .table-wrapper {
        overflow: hidden;
        .el-button {
            padding: 0;
        }
        .head-img{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #eee;
            vertical-align: text-bottom;
        }
        .btn-delete {
            color: #fd4d32;
            &.is-disabled {
                color: #c0c4cc;
                cursor: not-allowed;
            }
        }
        .upload-verify-btn{
            margin-left: 0;
        }
        .check-btn{
            // margin: 0 auto;
            // display: block;
        }
        .table-inner-input{
            outline: none;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            width: 100%;
            background:rgba(249,249,249,1);
            border:1px solid rgba(221,221,221,1);
            padding-left: 5px;
            cursor: pointer;
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }

            input[type="number"] {
                -moz-appearance: textfield;
            }
        }
        .input-disabled{
            background:transparent;
            border:1px solid transparent;
            cursor: default;
        }
    }
    .pagination-wrapper{
        text-align: right;
        margin-bottom: 15px;
        margin-right: -10px;
    }
}
.upload-inner-wrap{
    text-align: center;
}
</style>
<style lang="less">
    .grade-select{
        .el-input__inner{
            height: 30px!important;
            line-height: 30px;
            padding: 0;
            border-radius: 0;
            background: #f9f9f9;
            padding-left: 5px;
        }
        .el-input__suffix{
            // top: 6px;
            .el-input__icon{
                line-height: normal;
            }
        }
        .el-input.is-disabled{
            .el-input__suffix{
                display: none;
            }
        }
        .el-input.is-disabled .el-input__inner{
            cursor: pointer!important;
            background-color: transparent;
            border-color: transparent;
            color: rgb(84, 84, 84);
            cursor: default;
        }
        .el-input.is-disabled .el-input__inner:hover {
            border-color: transparent!important;
        }
    }
    .img-upload{
        width: 100%;
    }
    .check-img{
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    .verify-class-wrap{
        .el-radio-button__orig-radio:checked+.el-radio-button__inner{
            background-color: #fff;
            border-color: #409EFF;
            -webkit-box-shadow: -1px 0 0 0 #409EFF;
            box-shadow: -1px 0 0 0 #409EFF;
            color: #409EFF;
        }
    }
</style>


